<template>
    <div class="accounting">
        <img
            class="ssfgk-bj"
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/seo_m/m_ssfgk_bj.png"
            alt="模板专区"
        />
        <div class="nav-bar" :style="{ top: AppNavShow ? '3.5rem' : 0 }">
            <nuxt-link to="/" class="left">
                <van-icon name="arrow-left" color="#000000" size="1.5rem" />
            </nuxt-link>
            <div class="centent">模板专区</div>
            <div class="right"></div>
        </div>

        <div
            class="tabs"
            :style="{
                top: AppNavShow ? '6.25rem' : '3.5rem',
            }"
        >
            <div class="tabs1">
                <van-tabs
                    v-model="firstKindIndex"
                    title-active-color="#333333"
                    background="transparent"
                    color="#4291FF"
                    line-width="1.25rem"
                    class="vantabs"
                >
                    <van-tab
                        v-for="(item, index) in firstKinds"
                        :title="item.name"
                        :key="index"
                        :to="`/templates/modelarea/${item.id}/${item.second[0].id}/1`"
                    >
                    </van-tab>
                </van-tabs>
                <div class="more" @click="tabsShow = true">
                    <van-icon
                        name="arrow-down"
                        color="#ffffff"
                        size="14"
                        class="icon"
                    />
                </div>
            </div>

            <div class="moban-tab">
                <van-tabs
                    v-model="secondKindIndex"
                    title-active-color="#ffffff"
                    title-inactive-color="#333333"
                    background="transparent"
                    line-width="0"
                    swipe-threshold="1"
                >
                    <van-tab
                        v-for="(item, index) in secondKinds"
                        :title="item.name"
                        :key="index"
                        :to="`/templates/modelarea/${firstKindId}/${item.id}/1`"
                    >
                    </van-tab>
                </van-tabs>
            </div>
        </div>

        <div
            class="moban-list"
            :style="{
                height: `calc(100vh - ${
                    AppNavShow ? '6.25rem' : '3.5rem'
                } - 44px - 36px - 0.6rem )`,
            }"
        >
            <nuxt-link
                v-for="(item, index) in modelList"
                :key="index"
                class="moban-item"
                :to="'/templates/' + item.id + '.html'"
            >
                <img
                    :src="getType(item.type)"
                    :alt="item.type"
                    class="type-img"
                />
                <div class="info">
                    <div class="name">{{ item.title }}</div>
                    <div class="type">{{ item.tname }} | {{ item.type }}</div>
                </div>
            </nuxt-link>
            <div class="page">
                <van-pagination
                    v-model="page"
                    :total-items="count"
                    :show-page-size="3"
                    :items-per-page="pagesize"
                    force-ellipses
                    @change="changePage"
                />
            </div>
        </div>

        <van-popup v-model="tabsShow" round position="right" closeable>
            <div class="first-kinds">
                <div
                    v-for="(items, indexs) in firstKinds"
                    :key="indexs"
                    class="item"
                >
                    <div class="title">{{ items.name }}</div>
                    <div class="second">
                        <nuxt-link
                            v-for="(item, index) in items.second"
                            :key="index"
                            class="second-item"
                            :class="{
                                'second-item-active': item.id == secondKindId,
                            }"
                            :to="`/templates/modelarea/${items.id}/${item.id}/1`"
                            @click="tabsShow = false"
                        >
                            {{ item.name }}
                        </nuxt-link>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

import { goTopSmooth } from "@/assets/utils/utils.js";

import { getModelCate, getModelList } from "@/assets/api/modelAreaApi";
import { getanalysedata } from "@/assets/api/indexApi.js";

import moment from "moment";

export default {
    async asyncData({ params, query }) {
        let data = {
            firstKinds: [], //一级分类
            firstKindIndex: 0, //一级分类
            firstKindId: -1, //一级分类id (-1表示没选)
            secondKinds: [], //二级分类
            secondKindIndex: [], //二级分类
            secondKindId: -1, //二级分类id (-1表示没选)
            page: 1,
            pagesize: 10,
            count: 0,
            modelList: [], //模板列表数据(主数据)
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/modelarea/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
        };

        data.firstKindId = params.tid;
        data.secondKindId = params.s_tid;
        data.jsonld["@id"] += data.firstKindId + "/" + data.secondKindId;
        if (params.page) {
            data.page = parseInt(params.page);
            data.jsonld["@id"] += "/" + params.page;
        }
        let res = await getModelCate();
        if (res.code == 1) {
            data.firstKinds = res.data;
            let i = 0;
            for (let item of data.firstKinds) {
                if (item.id == data.firstKindId) {
                    data.firstKindIndex = i;
                    data.secondKinds = item.second;
                }
                i++;
            }
            i = 0;
            for (let item of data.secondKinds) {
                if (item.id == data.secondKindId) {
                    data.secondKindIndex = i;
                }
                i++;
            }

            var params = {
                tid: data.firstKindId,
                s_tid: data.secondKindId,
                page: data.page,
                pagesize: data.pagesize,
            };
            let res1 = await getModelList(params);
            if (res1.code == 1) {
                data.modelList = res1.data.list;
                if (res1.data.list.length > 0) {
                    data.count = res1.data.list[0].datacount;
                    data.jsonld.pubDate = data.jsonld.upDate =
                        res1.data.list[0].createtime;
                } else {
                    data.count = 0;
                }
            } else {
                data.modelList = [];
            }
        }

        return data;
    },

    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld), // <- set jsonld object in data or wherever you want
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.metaTitle + "--【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.metaDescription,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.metaKeywords,
                },
            ],
        };
    },
    layout: "home",
    components: {},
    data() {
        return {
            metaTitle: "财税表单-财税表格",
            metaKeywords: "财税表单,财税表格",
            metaDescription:
                "小竹财税财税表单版块，汇集众多财税表单、财税表格案例，实时更新财税表单格式及财税表格样式，方便企业财税和财税从业人员下载使用。",

            tid: 10,

            keyword: "",
            menuSearchIndex: 0,

            tabsShow: false,

            getType: function (type) {
                switch (type) {
                    case "EXCEL":
                        return require("~/assets/images/index/excel.png");
                    case "PDF":
                        return require("~/assets/images/index/pdf.png");
                    case "WORD":
                        return require("~/assets/images/index/word.png");
                    case "PPT":
                        return require("~/assets/images/index/ppt.png");
                    default:
                        return require("~/assets/images/index/zip.png");
                }
            },
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            AppNavShow: (state) => state.AppNavShow,
        }),
    },
    created() {
        this.getMetaInfo();
    },
    mounted() {
        console.log(this.secondKinds);
        this.behavioralRecords();
        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    watch: {},
    methods: {
        getMetaInfo() {
            if (this.$route.params.tid == "1") {
                this.metaTitle = "财税表单-财税表格";
                this.metaKeywords = "财税表单,财税表格";
                this.metaDescription =
                    "小竹财税财税表单版块，汇集众多财税表单、财税表格案例，实时更新财税表单格式及财税表格样式，方便企业财税和财税从业人员下载使用。";
            } else if (this.$route.params.tid == "2") {
                this.metaTitle = "企业规章制度";
                this.metaKeywords = "企业规章制度";
                this.metaDescription =
                    "小竹财税企业规章制度版块，汇集众多企业规章制度案例，实时更新各行业企业规章制度及企业内部规章制度档案，方便企业经营管理和企业管理人员下载使用。";
            } else if (this.$route.params.tid == "3") {
                this.metaTitle = "企业合同范本-行业合同模板";
                this.metaKeywords = "企业合同范本,行业合同模板";
                this.metaDescription =
                    "小竹财税企业合同范本版块，汇集众多企业合同范本案例，实时更新企业合同范本及行业合同模板，方便企业经营管理和企业管理人员下载使用。";
            } else if (this.$route.params.tid == "3") {
                this.metaTitle = "企业合同范本-行业合同模板";
                this.metaKeywords = "企业合同范本,行业合同模板";
                this.metaDescription =
                    "小竹财税企业合同范本版块，汇集众多企业合同范本案例，实时更新企业合同范本及行业合同模板，方便企业经营管理和企业管理人员下载使用。";
            } else if (this.$route.params.tid == "12") {
                this.metaTitle = "办公常用表格下载-人事行政常用表单";
                this.metaKeywords = "办公常用表格下载,人事行政常用表单";
                this.metaDescription =
                    "小竹财税办公常用表格下载版块，汇集众多办公常用表格下载、人事行政常用表单案例，实时更新各行业办公常用表格及行业人事行政常用表单，方便企业经营管理和企业相关人员下载使用。";
            } else if (this.$route.params.tid == "11") {
                this.metaTitle = "毕业季常用表格下载";
                this.metaKeywords = "毕业季常用表格下载";
                this.metaDescription =
                    "小竹财税毕业季常用表格下载版块，汇集众多毕业季常用表格下载案例，实时更新毕业开题报告、答辩PPT以及简历模板，方便毕业生和相关教务人员下载使用。";
            } else if (this.$route.params.tid == "8") {
                this.metaTitle = "财税模板干货分享";
                this.metaKeywords = "财税模板干货分享";
                this.metaDescription =
                    "小竹财税财税模板干货分享下载版块，汇集众多毕财税模板干货分享案例，实时更新留抵退税政策梳理，小规模纳税人优惠、差额征税、高新技术企业申报等，方便企业财税和相关财税从业人员下载使用。";
            }

            for (let items of this.firstKinds) {
                if (this.$route.params.tid == items.id) {
                    for (let item of items.second) {
                        if (this.$route.params.s_tid == item.id) {
                            this.metaTitle = `模板专区-${items.name}-${item.name}`;
                            this.metaKeywords += `,${items.name},${item.name}`;
                            this.jsonld.title = this.metaTitle;
                            this.jsonld.description = this.metaDescription;
                            return;
                        }
                    }
                }
            }
        },

        behavioralRecords() {
            let describe = "";
            let code = "PG1";
            for (let items of this.firstKinds) {
                if (items.id == this.firstKindId) {
                    describe = items.name;
                    switch (this.firstKindId + "") {
                        case "10":
                            code = "PG4";
                            break;
                        case "1":
                            code = "PG3";
                            break;
                        case "2":
                            code = "PG5";
                            break;
                        case "3":
                            code = "PG6";
                            break;
                        case "12":
                            code = "PG7";
                            break;
                        case "11":
                            code = "PG8";
                            break;
                        case "8":
                            code = "PG9";
                            break;
                    }

                    for (let item of items.second) {
                        if (item.id == this.secondKindId) {
                            describe = items.name + "-" + item.name;
                        }
                    }
                }
            }
            getanalysedata({
                m_id: 5,
                type: 1,
                code: code,
                describe: describe,
            });
        },
        //分页
        changePage(e) {
            this.$router.push({
                path: `/templates/modelarea/${this.firstKindId}/${this.secondKindId}/${e}`,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.accounting {
    position: relative;
    background-color: #ffffff;
}
.ssfgk-bj {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.nav-bar {
    width: 100%;
    position: sticky;

    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 2.75rem;
    .left,
    .right {
        width: 15%;
    }

    .centent {
        font-weight: 600;
        font-size: 1.31rem;
        color: #333333;
    }
}

.moban-list {
    position: relative;
    z-index: 100;
    padding-top: 0.6rem;
    overflow: auto;
    .moban-item {
        display: block;
        width: 92%;
        margin: 0 auto;
        background: #ffffff;
        border: 1px solid #e8e8e8;
        height: 4.2rem;
        display: flex;
        align-items: center;
        padding-left: 0.875rem;
        margin-bottom: 0.56rem;
        .type-img {
            object-fit: cover;
            width: 2rem;
            height: 2rem;
        }
        .info {
            padding-left: 0.81rem;
        }
        .name {
            font-size: 0.875rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            line-height: 1.5;
        }
        .type {
            font-size: 0.68rem;
        }
    }
}

.page {
    width: 92%;
    margin: 0 auto;
    padding: 1rem 0;
}

.tabs {
    position: sticky;
    z-index: 110;
    .tabs1 {
        position: relative;
        width: 90vw;
        .more {
            position: absolute;
            top: 10px;
            right: -30px;
            border-radius: 5rem;
            width: 1.3rem;
            height: 1.3rem;
            min-width: 1.3rem;
            text-align: center;
            line-height: 1.3rem;
            background-color: #999999;
        }
    }
}

.moban-tab {
    padding: 0.6rem 1rem 0;

    ::v-deep .van-tab {
        padding: 0 0.4rem;
        height: 1.5rem;
        border-radius: 0.2rem;
        background-color: #ddeeff;
        margin-right: 0.45rem;
        flex: 0;
    }
    ::v-deep .van-tab--active {
        background-color: #409eff;
    }
    ::v-deep .van-tab__text {
        white-space: nowrap;
    }
    ::v-deep .van-tabs--line .van-tabs__wrap {
        height: 36px;
    }
}

.first-kinds {
    padding: 3rem 2rem;
    .item {
        .title {
            font-size: 1.2rem;
            font-weight: 600;
        }
        .second {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            width: 60vw;
            padding-bottom: 1rem;
            .second-item {
                display: block;
                padding: 0 0.4rem;
                height: 1.5rem;
                line-height: 1.5rem;
                border-radius: 0.2rem;
                background-color: #ddeeff;
                margin-right: 0.45rem;
                margin-top: 0.8rem;
                color: #333333;
                font-size: 0.75rem;
                white-space: nowrap;
            }
            .second-item-active {
                background-color: #409eff;
                color: #ffffff;
            }
        }
    }
}
</style>